<template>
  <div>
    <el-carousel :height="height" class="swiper">
      <el-carousel-item v-for="(item, key) in carouselList" :key="key">
        <div>
          <el-image
            :src="item.image"
            :style="`width: 100%; height: ${height}`"
            fit="cover"
          ></el-image>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script>
export default {
  props: {
    height: {
      type: String,
      default: "618px",
    },
    carouselList: {
      type: Array,
    },
  },
  data() {
    return {};
  },
};
</script>
<style scoped>
/deep/ .el-carousel__container .el-carousel__arrow--left {
  width: 55px !important;
  height: 55px !important;
  font-size: 24px;
}
/deep/ .el-carousel__container .el-carousel__arrow--right {
  width: 55px !important;
  height: 55px !important;
  font-size: 24px;
}
/deep/ .el-carousel__indicators .is-active .el-carousel__button {
  width: 20px;
  height: 20px;
  background: #ffffff;
  border-radius: 50%;
}
/deep/ .el-carousel__indicators .el-carousel__button {
  background: rgba(255, 255, 255, 0.4);
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
</style>
